<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>日志管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户操作日志</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card v-show="myFollowDialogVisible">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入姓名" clearable v-model="username" @clear="search">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="8">
          <h3 style="color: aquamarine">用户登录日志</h3>
        </el-col>

        <el-col :span="4">
          <el-button type="primary" @click="changFollowOrFans()">显示管理员操作日志</el-button>
        </el-col>
      </el-row>
      <el-table :data="userOperationList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="用户名" prop="username"></el-table-column>
        <el-table-column label="操作日志" prop="operationType"></el-table-column>
        <el-table-column label="结果" prop="result"></el-table-column>
        <el-table-column label="操作时间" prop="createTime"></el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageUserNum"
          :page-sizes="[5, 10,15]"
          :page-size="pageUserSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalUser"
      ></el-pagination>
    </el-card>

    <el-card v-show="myFansDialogVisible">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入姓名" clearable v-model="adminName" @clear="search">
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="8">
          <h3 style="color: #42b983">管理员登录日志</h3>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="changFollowOrFans()">显示用户操作日志</el-button>
        </el-col>
      </el-row>
      <el-table :data="adminOperationList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="用户名" prop="adminName"></el-table-column>
        <el-table-column label="操作日志" prop="operationType"></el-table-column>
        <el-table-column label="结果" prop="result"></el-table-column>
        <el-table-column label="操作时间" prop="createTime"></el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageAdminNum"
          :page-sizes="[5, 10,15]"
          :page-size="pageAdminSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalAdmin"
      ></el-pagination>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myFollowDialogVisible: true,
      myFansDialogVisible: false,
      pageUserNum: 1,
      pageUserSize: 5,
      totalUser: 0,

      pageAdminNum: 1,
      pageAdminSize: 5,
      totalAdmin: 0,

      userOperationList:[],
      adminOperationList:[],
      username:"",
      adminName:""
    };
  },
  methods: {
    changFollowOrFans(){
      if(this.myFansDialogVisible){
        this.myFollowDialogVisible=true;
        this.myFansDialogVisible=false;
      }else if(this.myFollowDialogVisible){
        this.myFansDialogVisible=true;
        this.myFollowDialogVisible=false;
      }
    },

    initUserLog() {
      let url  = "log/userOperationLog";
      this.$axios.get(url,{
        params:{
          now: this.pageUserNum,
          size: this.pageUserSize,
          name: this.username,
        }
      }).then(res=>{
        // console.log("+++++++++++++++++==")
        // console.log(res)
        if (res.data.code == 200){
          this.userOperationList = res.data.data.list;
          this.totalUser = res.data.data.total;
          this.pageUserNum = res.data.data.pageNum;
          this.pageUserSize = res.data.data.pageSize;
        }else {
          this.$message({
            message:res.data.msg,
            type:"error",
            duration:1000
          })
        }
      })
    },
    initAdminLog() {
      let url  = "log/managerOperationLog";
      this.$axios.get(url,{
        params:{
          now: this.pageAdminNum,
          size: this.pageAdminSize,
          name: this.adminName,
        }
      }).then(res=>{
        if (res.data.code == 200){
          this.adminOperationList = res.data.data.list;
          this.totalAdmin = res.data.data.total;
          this.pageUserNum = res.data.data.pageNum;
          this.pageUserSize = res.data.data.pageSize;
        }else {
          this.$message({
            message:res.data.msg,
            type:"error",
            duration:1000
          })
        }
      })
    },

    search() {
      this.pageUserNum = 1;
      this.pageAdminNum = 1;
      this.initUserLog();
      this.initAdminLog();
    },
    handleSizeChange(newSize) {
      this.pageUserSize = newSize;
      this.pageAdminSize = newSize;
      this.initUserLog();
      this.initAdminLog();
    },
    handleCurrentChange(newPage) {
      this.pageUserNum = newPage;
      this.pageAdminNum = newPage;
      this.initUserLog();
      this.initAdminLog();
    },

  },
  created() {
    this.initUserLog();
    this.initAdminLog();
  }
};
</script>
<style lang="less" scoped>
</style>